<template>
    <div id="collectlist">
        <div class="header">
            <van-nav-bar title="不凡" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="content">
            <div class="title">我的收藏</div>
            <div class="sublist">
                <router-link
                    class="item"
                    v-for="(subitem,subindex) in collectList"
                    :key="subindex"
                    :to="`/pages/goods?id=${subitem.id}`"
                >
                    <img :src="subitem.list_pic_url" alt />
                    <p>{{subitem.name}}</p>
                    <p>￥{{subitem.retail_price}}</p>
                </router-link>
            </div>
        </div>
    </div>
</template>
<script>
import { listAction } from "@/api/collect";
export default {
    data() {
        return {
            openId: "",
            collectList: [],
        };
    },
    created() {
        this.openId = localStorage.getItem("openId");
        console.log(this.openId);
        this.getlistData();
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        async getlistData() {
            const data = await listAction({
                openId: this.openId,
            });
            console.log(data);
            this.collectList = data.collectGoodsList;
            console.log(this.collectList);
        },
    },
};
</script>
<style lang="scss">
#collectlist {
    border-top: 1px solid transparent;
    background: #f4f4f4;
    font-size: 0.32rem;
    padding-bottom: 1.333333rem;
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }
    .content {
        height: calc(100vh - 1.24rem);
        margin-top: 1.22667rem;
        overflow: auto;
        border-top: 0.01333rem solid transparent;
        .title {
            padding: 0.26667rem 0;
            text-align: center;
            background: #fff;
            margin-bottom: 0.06667rem;
            font-size: 0.48rem;
            font-weight: 700;
        }
        .sublist {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 9.73333rem;
            margin: 0 auto;
            .item {
                width: 4.8rem;
                background: #fff;
                margin-bottom: 0.13333rem;
                padding-bottom: 0.13333rem;
                img {
                    display: block;
                    width: 4.02667rem;
                    height: 4.02667rem;
                    margin: 0 auto;
                }
                p {
                    text-align: left;
                    margin-bottom: 0.06667rem;
                    text-indent: 1em;
                }
                :nth-child(2) {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 98%;
                }
                :nth-child(3) {
                    color: #9c3232;
                }
            }
        }
    }
}
</style>